<script setup>
import SendMsg from "@b/sendmsg.vue";
import MainInstro from "@b/main-intro.vue";
import robotchatitem from "@c/robotchatitem.vue";
import userchatitem from "@c/userchatitem.vue";
import { storeToRefs } from "pinia";
import { computed, nextTick, ref } from "vue";
import { useChatStore } from "@s/chat";
const chat = useChatStore();
const {
  activeIndex,
  mainloading,
  messageList,
  mainscrollref,
  mainscrollheight,
} = storeToRefs(chat);
</script>
<template>
  <div class="wrapper-container" v-loading="mainloading">
    <template v-if="activeIndex == -1">
      <el-empty description="请选择会话" />
    </template>
    <template v-else>
      <div class="main-panel" style="
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        ">
        <div class="content-wrapper" style="max-width: 900px">
          <div class="scroll" ref="mainscrollref" :style="'height:' + mainscrollheight">
            <template v-if="messageList && messageList.length">
              <template v-for="(item, index) in messageList" :key="index">
                <template v-if="item.role == 'user'">
                  <userchatitem :content="item.content"></userchatitem>
                </template>
                <template v-if="item.role == 'robot'">
                  <robotchatitem :content="item.content"></robotchatitem>
                </template>
              </template>
            </template>
            <template v-else>
              <MainInstro></MainInstro>
            </template>
          </div>
          <div class="gap-block"></div>
        </div>
        <!-- content-wrapper ends -->
        <send-msg></send-msg>
      </div>
    </template>
  </div>
</template>
<style scoped lang="scss">
.wrapper-container {
  background-color: #f2edf3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}
</style>
